import { cn } from "common-web";
import { computed, defineComponent, type InputHTMLAttributes, provide } from "vue";
import theme from "@/common/theme";

export type InputSize = "sm" | "md" | "lg";

type InputProps = Omit<InputHTMLAttributes, "size"> & {
  modelValue?: string;
  size?: InputSize | undefined;
};

const Input = defineComponent<InputProps>({
  props: ["modelValue", "size"], // 把 size 声明在这里以避免透传给 <input />
  emits: ["update:modelValue"],
  setup(p, { emit }) {
    const sizeClass = computed(() => {
      switch (p.size) {
        case "sm":
          return "px-2 py-1 h-8  text-sm";
        case "lg":
          return "px-4 py-2 h-12 text-lg";
        default:
          return "px-4 py-2 h-10 text-sm";
      }
    });

    provide("size", 0);

    return () => (
      <input
        class={cn(
          "border",
          theme.borderColor,
          theme.borderRadius,
          "hover:outline-2 hover:outline-gray-300",
          "focus:outline-2 focus:outline-gray-300 focus:border-gray-300",
          theme.shadow,
          sizeClass.value,
          p.class,
        )}
        value={p.modelValue}
        onInput={(e) => emit("update:modelValue", (e.target as HTMLInputElement).value)}
      />
    );
  },
});

Input.props = ["size", "class"];

export default Input;
